<template>
	<div class="item flex-aic flex-ju-sb">
		<span>{{ label }}</span>
		<div class="value flex-center" :class="rangeClass">{{ value }}</div>
	</div>
</template>
<script setup>
import {defineProps, computed} from 'vue'

const props = defineProps({
	label: {
		type: String,
		default: '',
		required: true
	},
	value: {
		type: Number,
		default: '',
		required: true
	},
	range: {
		type: Array,
		default: () => [],
		required: true,
		validator: (val) => {
			return val.length === 2 && val.every(item => typeof item === 'number')
		}
	},
	type: {
		type: String,
		default: 'in',
		validator: (val) => {
			return ['in', 'out'].includes(val)
		}
	}
})

const rangeClass = computed(() => {
	if(props.type === 'in'){
		if(props.value >= props.range[0] && props.value <= props.range[1]) {
			return 'success'
		}else{
			return 'error'
		}
	}else{
		if(props.value < props.range[0] || props.value > props.range[1]) {
			return 'success'
		}else{
			return 'error'
		}
	}
	
})
</script>
<style scoped lang="scss">
.value{
	background: #fff;
	height: 32px;
	width: 72px;
	margin-left: 8px;
	border-radius: 3px;
	font-size: 20px;
}
.success{
	color: #29CB41;
}
.error{
	color: #FE6057;
}
</style>